<template>
	<view class="index">
		<!-- Tabbar页面 -->
		<view v-if="tabberPageLoadFlag[0]" :style="{ display: currentTabbarIndex === 0 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<home ref="home"></home>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{ display: currentTabbarIndex === 1 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<statistics ref="statistics"></statistics>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{ display: currentTabbarIndex === 2 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<message ref="message"></message>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{ display: currentTabbarIndex === 3 ? '' : 'none' }">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<my ref="my" @changeTabbarPage="changeTabbar"></my>
			</scroll-view>
		</view>

		<!-- 底部导航栏 -->
		<tabbar class="tabbar" :currentIndex="currentTabbarIndex" @changeTabbar="changeTabbar"></tabbar>
	</view>
</template>

<script>
// 首页
import Home from "@/sub-package/home/home.vue";
// 统计
import Statistics from "@/sub-package/statistics/statistics.vue";
// 消息
import Message from "@/sub-package/message/message.vue";
// 我的
import My from "@/sub-package/my/my.vue";
// 底部导航
import Tabbar from "./component/tabbar.vue";

export default {
	components: {
		Home,
		Statistics,
		Message,
		My,
		Tabbar,
	},
	data() {
		return {
			currentTabbarIndex: 0,
			tabberPageLoadFlag: [],
		};
	},
	onLoad(options) {
		const index = Number(options.index || 0);
		for (let i = 0; i < 4; i++) {
			this.tabberPageLoadFlag.push(i === index);
		}
		this.changeTabbar(index);
	},
	onReady() {},
	methods: {
		// 导航页面滚动到底部
		tabbarPageScrollLower(e) {},
		// 修改当前选中的tabbar
		changeTabbar(index) {
			if (this.currentTabbarIndex === index) return;
			this._switchTabbarPage(index);
			this.currentTabbarIndex = index;
		},

		// 切换导航页面
		_switchTabbarPage(index) {
			const selectPageFlag = this.tabberPageLoadFlag[index];
			if (selectPageFlag === undefined) {
				return;
			}
			if (selectPageFlag === false) {
				this.tabberPageLoadFlag[index] = true;
			}
		},
		// ============ 自定义 ============
	},
};
</script>

<style lang="scss" scoped>
.index {
	width: 100%;
	position: relative;

	.custom-tabbar-page {
		width: 100%;
		height: calc(100vh - 180rpx - constant(safe-area-inset-bottom) / 2);
		height: calc(100vh - 180rpx - env(safe-area-inset-bottom) / 2);
		box-sizing: border-box;
		padding-bottom: 0rpx;
	}

	.tabbar {
		z-index: 9998;
	}
}
</style>
